<template>
	<view class="page-wraper">
		<view class="header-view-box">
			<view class="view-box">
				<view class="price_title_view">
					<!-- <view class="gradient_view" style="position: absolute; z-index: inherit;"> -->
					<!-- </view> -->
					<text class="title">报价列表</text>
				</view>
			</view>
		</view>
		
		<view class="price_card" v-for="(item,index) in dataList">
			<view style="padding-top: 10px; margin-right: 8px; margin-left: 8px; ">
				<view style="flex-direction: row; display: flex;">
					<view class="" style="align-items: center; flex-direction: row;display: flex;flex: 1;">
						<view style="text-align: center; width: 22px; height: 22px; background: #416CD1; opacity: 1;border-radius: 11px;">
							<text class="primary_num">{{index+1}}</text>
						</view>
						<text class="price_text">36.5</text>
						<text class="price_text" style="margin-top: 3px ; font-size: 15px; font-weight: 500;color: #333333;">万</text>
						<text class="guide_text ">指导价：{{item.guide_price}} </text>
					</view>
					<!-- <view class="time_text" style="text-align: center;">还剩5小时45分钟失效</view> -->
				</view>
				
				<view style="margin-left: 12px; margin-top: 4px ;flex-direction: row; display: flex;">
					<text class="guide_text" style="color: #333333;">定金{{item.deposit_price}}元</text>
					<!-- <text class="guide_text" style="color: #333333;">车在东区</text> -->
				</view>
				
		<!-- 		<view class="logis_bar" style="align-items: center; display: flex;">
					<view class="black_text" style="margin-left: 14px;"> 物流参考价 </view>
					<view style="flex: 1;"></view>
					<view class="black_text" style="flex-direction: row; display: flex;"> 
						<text class="black_text">1400元起</text>
						<image class="right_btn" style=" padding-top: 1px; padding-left: 5px;padding-right: 10px;" src="/static/right_back.png" mode=""></image>
					</view>
				</view> -->
				
				<view class="tag-group">
					<view class="price-tag" v-for="(item,index) in item.label"  style="margin-top: 0px;">
						{{item}}
						<!-- {{item}} -->
					</view>
				</view>
				
				<view style="margin-top: 15px; flex-direction: row; display: flex;">
					<image :src="item.imageurl" mode="" style="margin-right: 5px; width: 15px; height:15px;"></image>
					<view class="name_text">{{item.users_name}}</view>
					<image :src="item.users_icon" style="margin-left: 5px; width: 15px; height: 15px;"></image>
					<image :src="item.cover_url" style="margin-left: 5px; width: 15px; height: 15px;"></image>
					<!-- <view class="black_text" style="margin-left: 14px;">好评 0</view> -->
					<!-- <view class="black_text" style="margin-left: 14px;">粉丝 0</view> -->
				</view>
				
				<view class="black_text" style="margin-top: 8px;">
					注册时长：{{item.register_time}}
				</view>
				
				
				<view style="padding-bottom: 16px; display: flex; flex-direction: row; 8px;">
					<view style="flex: 1;"></view>
					<view @click="feedbackClick(index)" class="feeckback_btn">反馈</view>
					<view @click="connect(item)" class="connect_btn">联系上游</view>
				</view>
			</view>
			
		</view>
		<!-- </view> -->
		
		<uni-popup ref="feedback_popup" :animation="true" type="bottom" @maskClick="maskClickpopup()"
			@change="changePopup()">
			<view class="popup-bottom-view">
				<view class="popup-text-popup">反馈</view>
				<view class="guide_text" style="margin-left: 14px;">请选择投诉原因后，进行投诉</view>
				<view class="popup-list-view-box">
					<view v-for="(item,index) in feedbackDataList">
						<view :class="feedbackIndex==index?'popup-bc-select-view':'popup-bc-view'">
							<view @click="feedbackItemClick(item,index)">{{item.name}}</view>
						</view>
					</view>
				</view>
				<textarea v-if="chooseOther" class="text-tare-view-class" v-model="otherContent" placeholder="请输入反馈内容"
					placeholder-class="textarea-pcs" />
				<view class="popup-btn-popup" @click="feedbackConfrim()">确定</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniListCarSource from '@/components/uniListCarSource/uniListCarSource.vue'
	import {
		usedCarSearchSupplierQuotationList, 
		getFeedbackContents,
		addFeedback ,
		} from '@/api/search-car.js'
	
	export default {
		components: {
			uniListCarSource
		},
		
		onLoad:function(options){
			
			
			uni.getStorage({
				key: 'login',
				success: (res) => {
					let userInfo = res.data
					this.userId = userInfo.id
				}
			})
			
			this.id = options.id
			usedCarSearchSupplierQuotationList(this.id)
			.then(res => {
				if (res.code == 0) {
					this.dataList = res.data
				}
			})
			
			getFeedbackContents()
			.then(res => {
				let code = res.code
				if (code == 0) {
					this.feedbackDataList = []
					this.feedbackDataList = res.data
					let other = {"id":"other", "name": "其他"}
					this.feedbackDataList.push(other)
				}
			})
		},
		
		data() {
			return {
				id: '',
				userId: '',
				quotedPriceDataList: [],
				// feedbackDataList: [{"name": "1"}, {"name": "1"}, {"name": "1"}],
				feedbackDataList: [],
				feedbackIndex: 9999,
				feedbackContent: "",
				otherContent: "",
				selectedFeedbackIndex: 3333,
				chooseOther: false,
				
				dataList: [],

				// dataList: [
				// 	{
				// 	"id": "7BAFA61B-FA17-BB3A-F8CC-5009E43CF235", //报价主键id
				// 	"users_id": "9FE0AAB0-EF09-ED77-E05A-F02E5DA7A71C", //用户id
				// 	"quotation_price": "151", //报价
				// 	"deposit_price": "10000", //订金
				// 	"distance": null, //自提距离 标签
				// 	"store_protection": null, //店保情况 标签
				// 	"invoicing": null, //开票类型1：普票 2：增票 标签
				// 	"invoice": null, //发票 1：店票 2：汽贸票 标签
				// 	"procedures": null, //手续 1：票证随车 2：票证不随车 标签
				// 	"collection_conditions": null, //提车要求 1：本人到店 2：本人不到店 标签
				// 	"create_time": "2023-05-29 16:11", //发布时间
				// 	"register_time": "1个月", //注册时长
				// 	"mobile": "13111111111", //联系电话
				// 	"guide_price": "100.00万", //指导价
				// 	"imageurl": "https://picture.qiumiaopet.com/admin/202303/742245141c33efb786cf86ed579fcffd.jpg", //用户头像
				// 	"cover_url": "", //会员图标
				// 	"identity": 1, //1：个人认证 2：企业认证
				// 	"users_name": "张*" //报价方名称
				// 	}
				// ]
			}
		},
		methods: {
			connect(item) {
				let phoneNum = item.mobile
				uni.makePhoneCall({
					phoneNumber: phoneNum,
					success: (res) => {
						
					}
				})
			},
			
			feedbackItemClick(item, index) {
				this.feedbackIndex = index
				this.feedbackContent = item.name
				
				if (item.id == "other") {
					this.chooseOther = true
				} else {
					this.chooseOther = false
				}
			},
			
			
			feedbackConfrim() {
				if (this.feedbackContent == "其他") {
					if (this.otherContent == "") {
						uni.showToast({
							title: "请输入反馈内容",
							icon: 'none',
							duration: 3000,
						})
						return
					}
				}
				
				let index = this.selectedFeedbackIndex 
				let info = this.dataList[index]
				let param = {
					"state" : "2",
					"users_id" : this.userId,
					"to_users_id" : info.users_id,
					"quotation_id": info.id,
					"content" : this.feedbackContent == "其他" ? this.otherContent : this.feedbackContent
				}
				addFeedback(param)
				.then(res => {
					let code = res.code 
					if (code == 0) {
						this.$refs.feedback_popup.close()
						this.feedbackIndex = 9999
						this.feedbackContent = ""
						this.otherContent = ""
						
						uni.showToast({
							title: "反馈成功",
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			
			feedbackClick(index) {
				this.selectedFeedbackIndex = index
				this.$refs.feedback_popup.open()
			},
			
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom, #F0F0F0, #F0F0F0);
	}
	
	.popup-text-popup {
		width: 100%;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000026;
		text-align: center;
		opacity: 1;
		margin-bottom: 22rpx;
	}
	
	.popup-btn-popup {
		width: 654rpx;
		height: 94rpx;
		background-color: #0E59EA;
		opacity: 1;
		border-radius: 14rpx;
		margin: 0rpx 46rpx;
		text-align: center;
		line-height: 94rpx;
	
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}
	
	.popup-list-view-box {
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		padding: 50rpx 19rpx;
	}
	
	.popup-bc-view {
		width: 160rpx;
		height: 54rpx;
		border: 1px solid #1C212514;
		border-radius: 28rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54rpx;
		color: #1C2125;
		opacity: 1;
		margin: 0rpx 9rpx 24rpx 9rpx;
	}
	
	.popup-bc-select-view {
		width: 160rpx;
		height: 54rpx;
		border: 1px solid #1C212514;
		border-radius: 28rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		background-color: #EDF1FF;
		font-weight: 400;
		line-height: 54rpx;
		color: #0E59EA;
		opacity: 1;
		margin: 0rpx 6rpx;
	}
	
	.popup-bottom-view {
		width: 100%;
		height: auto;
		background-color: white;
		padding-top: 54rpx;
		padding-bottom: 46rpx;
	}
	
	.text-tare-view-class {
		width: 635rpx;
		height: 176rpx;
		background: #F4F4F4;
		opacity: 1;
		border-radius: 8rpx;
		margin-left: 20px;
		margin-bottom: 20px;
		margin-top: -10px;
		padding: 14rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
	}
	
	.textarea-pcs {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.cancel_btn {
		height: 47px;
		margin: 34px 24px 80px 24px;
		background: #0E59EA;
		opacity: 1;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 16px;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.find_left_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.find_right_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.connect_btn {
		width: 90px;
		height: 30px;
		background-color: #0E59EA;
		opacity: 1;
		border-radius: 14px;
		margin-right: 10px;
		font-size: 12px;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	
	
	
	.tag-group {
		display: flex;
		flex-wrap: wrap;
		margin-left: 8px;
		margin-right: 50px;
		margin-bottom: 10px;
		margin-top: 6px;
	}
	
	.price-tag {
		/* width: 64px; */
		/* height: 25px; */
		padding: 5px 14px 5px 14px;
		background: #F4F4F4;
		opacity: 1;
		border-radius: 13px;
		font-size: 10px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 6px;
	}
	
	.tag {
		/* width: 90px; */
		/* height: 27px; */
		background: #EDF1FF;
		border-radius: 14px;
		font-size: 12px;
		font-weight: 400;
		color: #0E59EA;
		/* display: flex; */
		/* justify-content: center; */
		/* align-items: center; */
		padding: 5px 14px 5px 14px;
	}
	

	
	.feeckback_btn {
		width: 90px;
		height: 30px;
		border: 1px solid #EDF1FF;
		border-radius: 14px;
		margin-right: 10px;
		
		font-size: 12px;
		font-weight: 500;
		color: #1C2125;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.right_btn {
		width: 7px;
		height: 13px;
	}
	
	
	.logis_bar {
		margin-top: 12px;
		height: 34px;
		background: rgba(230,237,253,1);
		border-radius: 0px;
	}
	
	.subtitle_text {
		font-size: 14px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.time_text {
		font-size: 12px;
		font-weight: 500;
		color: #ED2F2F;
		opacity: 1;
		/* background-color: red; */
	}
	
	.name_text {
		font-size: 11px;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	
	.black_text {
		font-size: 11px;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.guide_text {
		margin-left: 14px;
		height: 19px;
		font-size: 11px;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.price_text {
		height: 22px;
		font-size: 19px;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #ED2F2F;
		opacity: 1;
		margin-left: 5px;
	}
	
	.primary_num {
		height: 22px;
		font-size: 12px;
		font-weight: 600;
		color: #FFFFFF;
		opacity: 1;
	}
	
	.price_card {
		margin: 70px 14px 0px 14px;
		height: auto;
		background-color: white;
		border-radius: 7px;
		font-family: PingFang SC;
	}
	
	.find_card {
		margin-top: 10px;
		background-color: white;
		height: auto;
		font-family: PingFang SC;
	}
	
	.title {
		font-size: 15px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.price_title_view {
		width: 67px;
		margin-top: 34rpx;
		margin-left: 30rpx;
		margin-bottom: 42rpx;
		background: url(/static/bac-small.png);
		background-size: 100% 100%; //背景图片能够显示全
	}

	.gradient_view {
		width: 30px;
		height: 24px;
		background: radial-gradient(circle, #0E59EA 0%, rgba(255,255,255,0) 100%);
		border-radius: 50%;
	}

	.page-wraper {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
	}
	.header-view-box {
		position: fixed;
		top: 10;
		width: 100%;
		z-index: 11;
	}

	.view-box {
		display: flex;
		background-color: white;
	}

	
</style>